import React, {Component} from 'react'
import {Checkbox} from 'antd'
import {TwsReactMarkdownPreview} from 'tws-antd'
import {getLangFromLocalStorage, convertContent} from '../../constant/lang-util'

export default class MultipleChoice extends Component {
  changeAnswer(quiz, selects) {
    this.props.modifyAnswer(quiz, selects.filter(s => !isNaN(s)).sort().join(','))
  }

  getValue(multipleChoiceQuiz) {
    const preview = this.props.preview
    if (preview) {
      return multipleChoiceQuiz.answer.split(',').map(answer => parseInt(answer, 10))
    }
    if (multipleChoiceQuiz) {
      return multipleChoiceQuiz.userAnswer.split(',').map(answer => parseInt(answer, 10))
    }
    return []
  }

  getCorrect(multipleChoiceQuiz) {
    if (multipleChoiceQuiz.isCorrect) {
      return '**✅**'
    } else if (multipleChoiceQuiz.isCorrect === '') {
      return ''
    } else {
      return '**❌**  '
    }
  }

  render () {
    const multipleChoiceQuiz = this.props.quiz
    const {isTutor, index} = this.props
    const isCorrect = this.getCorrect(multipleChoiceQuiz)
    const status = multipleChoiceQuiz.answer || isTutor > 0
    const lang = getLangFromLocalStorage()
    const description = multipleChoiceQuiz[`description_${lang}`] || multipleChoiceQuiz.description

    return <div className='mark-down-wrap'>
      <TwsReactMarkdownPreview source={`${index+1}. ${description}`}/>
      <div className='margin-t-1'>
        <Checkbox.Group
          onChange={this.changeAnswer.bind(this, multipleChoiceQuiz)}
          disabled={!!status}
          defaultValue={this.getValue(multipleChoiceQuiz)}
        >
          {
            multipleChoiceQuiz.choices.map((option, index) => {
              return <Checkbox className='margin-l-1 radio-style' key={index} value={index}>
                {option[`choice_${lang}`] || option.choice}
              </Checkbox>
            })
          }
        </Checkbox.Group>
        {status ? <TwsReactMarkdownPreview source={isCorrect} /> : ''}
      </div>
    </div>
  }
}
